<template>
	<div id="Advanced_Setting">
		<el-form label-width="auto">
			<p>高级设置</p>
			<hr style="border: none; border-bottom: 2px solid rgba(0, 0, 0, 0.1); margin: 10px 0 10px" />
			<el-row>
				<el-col :offset="0" :span="16">
					<el-form-item label="分享功能:">
						<el-radio v-model="form.radio1" label="1">开启分享</el-radio>
						<el-radio v-model="form.radio1" label="2">关闭分享</el-radio>
						<span class="iconfont icon-wenhaoxiao icon-wenhaoxiao1" style="font-size: 18px; color: red; cursor: pointer">
							<i>可通过点击微信右上角的分享按钮进行分享</i>
						</span>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :offset="0" :span="16">
					<el-form-item label="分享至朋友圈:">
						<el-radio v-model="form.radio1" label="1">开启分享</el-radio>
						<el-radio v-model="form.radio1" label="2">关闭分享</el-radio>
						<span class="iconfont icon-wenhaoxiao icon-wenhaoxiao2" style="font-size: 18px; color: red; cursor: pointer">
							<i
								>关闭后，用户将无法分享至朋友圈，助力类活动由于微信外<br />链规范新增规定存在被封的风险，因此建议关闭此功能。</i
							>
						</span>
					</el-form-item>
				</el-col>
			</el-row>

			<p>安全设置</p>
			<hr style="border: none; border-bottom: 2px solid rgba(0, 0, 0, 0.1); margin: 10px 0 10px" />
			<el-row>
				<el-col :offset="0" :span="16">
					<el-form-item label="禁止不良用户访问:">
						<el-radio v-model="form.radio1" label="1">开启</el-radio>
						<el-radio v-model="form.radio1" label="2">关闭</el-radio>
						<span class="iconfont icon-wenhaoxiao icon-wenhaoxiao3" style="font-size: 18px; color: red; cursor: pointer">
							<i>开启后，采用万声平台的作弊防护系统，禁止在本平<br />台下有过不良行为的用户访问活动，防止利益损失。</i>
						</span>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :offset="0" :span="12">
					<el-form-item label="">
						<el-button @click="handleResetForm">重置</el-button>
						<el-button @click="handleSubmit" type="primary">保存</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				form: {}
			};
		},
		methods: {
			handleResetForm() {
				this.form = {};
			},
			handleSubmit() {}
		}
	};
</script>
<style lang='scss'>
	#Advanced_Setting {
		.el-row:last-of-type {
			.el-form-item__content {
				margin-left: 0px !important;
			}
		}
		.el-form-item__label {
			color: #000;
		}
		.icon-wenhaoxiao1 {
			i {
				display: none;
			}
			&:hover i {
				display: inline-block;
				font-style: normal;
				font-size: 12px;
				font-weight: bold;
				margin-left: 5px;
				vertical-align: middle;
				background-color: rgba(11, 124, 223, 0.94);
				width: auto;
				padding: 0 5px 0;
				box-sizing: border-box;
				line-height: 25px;
				color: #fff;
				position: relative;
				left: 5px;
				top: -6px;
				border-radius: 4px;
				&::after {
					content: '';
					position: absolute;
					left: -16px;
					width: 0px;
					height: 0px;
					border: transparent solid;
					border-width: 8px;
					border-right-color: #0b7cdff0;
					top: 6px;
				}
			}
		}

		.icon-wenhaoxiao2,
		.icon-wenhaoxiao3 {
			i {
				display: none;
			}
			&:hover i {
				display: inline-block;
				font-style: normal;
				font-size: 12px;
				font-weight: bold;
				margin-left: 5px;
				vertical-align: middle;
				background-color: rgba(11, 124, 223, 0.94);
				width: auto;
				padding: 0 5px 0;
				box-sizing: border-box;
				line-height: 20px;
				color: #fff;
				position: relative;
				left: 5px;
				top: -13px;
				border-radius: 4px;
				&::after {
					content: '';
					position: absolute;
					left: -16px;
					width: 0px;
					height: 0px;
					border: transparent solid;
					border-width: 8px;
					border-right-color: #0b7cdff0;
					top: 20px;
				}
			}
		}
	}
</style>